<template>
  <v-card class="login_card mx-auto d-flex flex-column" min-width="400" max-width="500">
    <v-card-title class="text-center bg-primary rounded-t-lg">
      智慧课程平台(CP)
    </v-card-title>
    <form @submit="submit">
      <v-card-text>
        <v-text-field
        class="my-5"
          v-model="account"
          v-bind="accountAttrs"
          :error-messages="errors.account"
          prepend-inner-icon="mdi-account"
          label="用户名"
          placeholder="请输入用户名"
          type="text"
          variant="outlined"
          autocomplete="username"
        />
        <v-text-field
        class="my-5"
          v-model="idCardNumber"
          v-bind="idCardNumberAttrs"
          :error-messages="errors.phone"
          prepend-inner-icon="mdi-phone"
          label="手机号"
          placeholder="请输入绑定的手机号"
          type="text"
          variant="outlined"
          autocomplete="idCard"
        />
        <v-text-field
        class="mt-5"
          v-model="passwd"
          v-bind="passwdAttrs"
          :error-messages="errors.passwd"
          prepend-inner-icon="mdi-lock"
          label="密码"
          placeholder="请输入密码"
          type="password"
          variant="outlined"
        />
        <v-text-field
        class="mt-5"
          v-model="repeatPasswd"
          v-bind="repeatPasswdAttrs"
          :error-messages="errors.repeatPasswd"
          prepend-inner-icon="mdi-lock"
          label="重复密码"
          placeholder="请重复输入密码"
          type="password"
          variant="outlined"
        />
      </v-card-text>
      <v-card-actions
        class="mb-10 mx-auto d-flex flex-row justify-md-center"
      >
        <v-btn type="submit" class="mx-auto border-sm bg-primary w-25" > 重置密码 </v-btn>
        <v-btn @click="back" type="button" class="mx-auto border-sm w-25" > 返回 </v-btn>
      </v-card-actions>
    </form>
  </v-card>
  <overlayTip ref="overlayTip"></overlayTip>
</template>


<script setup lang="ts">
import { API } from '@/services';
import { toTypedSchema } from '@vee-validate/yup';
// import axios from 'axios';
import { useForm } from 'vee-validate';
import { useRouter } from 'vue-router';
import * as yup from 'yup';
import overlayTip from '@/components/common/overlayTip.vue';
import { useTemplateRef } from 'vue';
const overlayTipInstance = useTemplateRef('overlayTip');
const router = useRouter();

const schema = toTypedSchema(
  yup.object({
    account: yup.string().matches(/^\d{8}$/, "请输入正确的用户名").required("用户名不能为空"),
    phone: yup.string().matches(/^\d{11}$/, "请输入正确的手机号").required("手机号不能为空"),
    passwd: yup.string().min(6, "密码长度不能小于6").required("密码不能为空"),
    repeatPasswd: yup.string().oneOf([yup.ref('passwd')], '两次输入的密码不一致').required("请重复输入密码"),
  })
);
const { handleSubmit, defineField, errors} = useForm({
  validationSchema: schema,
});
const [account, accountAttrs] = defineField('account');
const [idCardNumber, idCardNumberAttrs] = defineField('phone');
const [passwd, passwdAttrs] = defineField('passwd');
const [repeatPasswd, repeatPasswdAttrs] = defineField('repeatPasswd');


function back() {
  router.go(-1);
}
const submit = handleSubmit((values, { resetForm }) => {
  API.users.resetPassword({
    account: values.account,
    phoneNumber: values.phone,
    new_password: values.passwd,
    confirm_password: values.repeatPasswd,
  }).then((res) => {
    console.log(res);
    overlayTipInstance.value!.info('密码重置成功', 3000);
    resetForm();
  });
});

</script>

